/* header 头部 */
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:2px solid #1c91dd;
}

.header img{
    width: 20vw;
}

.header .logo img{
    width:30vw;
}

.toggle{
    background:url('../images/header-border.png') no-repeat right center;
}

.search{
    background:url('../images/header-border.png') no-repeat left center;
}

/* banner图 */
.banner{
    width:100%;
    margin-bottom:2rem;
}

.banner img{
    width:100%;
}

/* 风险评估 */
.assessment{
    border-top:1px solid #ccc;
    padding-bottom:1rem;
}

.assessment .title{
    color:#1c91dd;
    font-size:1.2rem;
    text-align: center;
    width:30%;
    margin:0 auto;
    margin-top:-.8rem;
    margin-bottom:1rem;
    background:#fff;
}

.assessment .list{
    display: flex;
    justify-content: space-around;
}

.assessment .list .item{
    width:20%;
    text-align: center;
}

.assessment .list .item .desc{
    font-size:1rem;
    white-space: nowrap;
}

/* 功能服务 */
.function{
    display: flex;
    flex-wrap: wrap;
    padding-bottom:2rem;
}

.function > div{
    width:33%;
}

.function .back img{
    width:100%;
    height:100%;
}

.function .content{
    background:#f5f5f5;
}

.function .content .title{
    font-size:1rem;
    margin-top:.5rem;
    margin-left:.5rem;
}

.function .content .list{
    margin-top:.5rem;
    margin-left:.5rem;
}

.function .content .list a{
    font-size:.8rem;
    color:#666666;
    text-decoration: none;
}

/* width <= 400px */
@media screen and (max-width: 400px){
    .function > div{
        width: 50%;
    }
}

/* 介绍和应用 */
.app{
    border-top:1px solid #ccc;
    padding-bottom:1rem;
}

.app .title{
    color:#1c91dd;
    font-size:1.2rem;
    text-align: center;
    width:55%;
    margin:0 auto;
    margin-top:-.8rem;
    margin-bottom:1rem;
    background:#fff;
    white-space: nowrap;
}

.app .box .back img{
    width:100%;
    height:100%;
}

.app .box{
    position: relative;
    width:100%;
    height:16vh;
    margin-bottom:1rem;
}

.app .box .back{
    width:100%;
    height:100%;
}

.app .box .mask{
    position: absolute;
    left:-40%;
    top:0;
    background:rgba(0, 0, 0, .7);
    width: 40%;
    height:100%;

    /* 过渡 */
    transition: all ease .4s;
}

.app .box .back:hover + .mask{
    left:0%;
}

.app .box .mask .title{
    background:transparent;
    color:#fff;
    font-weight: bold;
    margin:0 auto;
    margin-top:1rem;
    margin-bottom:.5rem;
    width:100%;
}

.app .box .mask .tag{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:82%;
    margin:0 auto;
}

.app .box .mask .tag span{
    display: inline-block;
    width:45%;
    border:1px solid #fff;
    text-align: center;
    font-size:.7rem;
    color:#fff;
    margin-bottom:.5rem;
}

.btnlist{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.btnlist .item{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:.5rem;
    padding:.5rem 0rem;
}

.btnlist .item .icon{
    margin-right:1rem;
    width:20%;
}

.btnlist .item:nth-child(1){
    width:49%;
    background:#55acee;
}

.btnlist .item:nth-child(2){
    width:49%;
    background:#3b5998;
}

.btnlist .item:last-child{
    width:100%;
    background:#363a42;
    padding:1rem 0rem;
}

.btnlist .item:last-child .icon{
    width:15%;
    padding-top:4px;
}

.btnlist .item .name{
    color:#fff;
    font-size:1rem;
    font-weight: 800;
}

/* 联系我们 */
.contact{
    border-top:1px solid #ccc;
    padding-bottom:1rem;
}

.contact .title{
    color:#1c91dd;
    font-size:1.2rem;
    text-align: center;
    width:30%;
    margin:0 auto;
    margin-top:-.8rem;
    margin-bottom:1rem;
    background:#fff;
    white-space: nowrap;
}

.contact .info{
    display: flex;
    flex-wrap: wrap;
    width:95%;
    margin:0 auto;
    margin-bottom:1rem;
    color:rgb(47, 47, 47);
}

.contact .info > div{
    width: 100%;
}

.info .tel{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:.7rem;
}

.info .tel .icon{
    border:1px solid #ccc;
    margin-right:.5rem;
}

.email{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.email .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:.7rem;
}

.email .item .icon{
    border:1px solid #ccc;
    flex-shrink: 0;
    margin-right:.5rem;
}

.email .item .text{
    white-space: nowrap;
}

/* width <= 400px  */
@media screen and (max-width:400px){
    .email .item{
        width:100%;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:.7rem;
    }

    .email .item .icon{
        margin-right:.5rem;
    }
}

.info .address{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.info .address .icon{
    flex-shrink: 0;
    border:1px solid #ccc;
    margin-right:.5rem;
}

.info .address .text{
}

.contact .map{
    width:100%;
    height:40vh;
}

/* 底部 */
.footer{
    position: sticky;
    left:0;
    bottom:0;
    width:100%;
    height:10vh;
    display: flex;
    background:#f5f5f5;
}

.footer .item{
    width:25%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding:.5rem 0rem;
    transition: all ease .3s;
    text-decoration: none;
}

.footer .item:hover{
    background:#1c91dd;
}

.footer .item:hover span{
    color:#fff!important;
}

.footer .item span{
    display: block;
    width:100%;
    color:#666;
    transition: all ease .3s;
}

.footer .item span:first-child{
    font-size:2.2rem;
}

.footer .item span:last-child{
    font-size:1rem;
}